/*
	buildTut.js
	Brandon Kerr, Washington University in St. Louis
	03/27/13

	Meant to be used with the build page. Allows easy tutorial presentation by
	blurring all but the content being explained, and a text area with controls
	to move forward/backward through the tutorial (which is just a collection
	of element ID and text/HTML pairs).
	
	Requirements: 
		- jQuery
		- tutorialSystem.css
*/

function BuildTut() {
	// tutorial is an array of length 3n, where n is the number of tutorial steps
	// each group of the three entries in the array are as follows:
	//		ids of elements to show sep'd by semicolon, title of step, step text
	this.tutorial = 
		[
			"none", "Getting Started", "Here's a quick walkthrough to get you started with ProjectLive3D. You can quit any time by clicking the 'X' in the corner of this box.",
			"imagecontainer", "The Image", "On the left is the image you're using. Drag the pins to places on the image that you can also see from Google Earth. Notice the zoom helper view as you drag a pin.<br /><br /> Go ahead, drag one.", 
			"imageSettingsButton;imageSettingsDropdown", "Image Settings", "Here you can modify the number of points you're aligning, choose whether to see the zoom helper view while dragging pins, and also change the amount of zoom - higher is more.",
			"numCorrsButton", "Number of Points", "Shows how many points you've matched between your image and Google Earth.",
			"addPointsButton;addPointsDropdown", "Add Points", "When you're done aligning the current point set, you can add more.<br /><br />Optional: Name the surface that your points lie on.",
			"saveButton", "Save Changes", "Save your aligned points as a scene.<br /><br />Note: You must align all required points before saving!",
			"locationSearchOverlay;gecontainer", "Search for Location", "Type in a location and press 'enter' to fly there in Google Earth.<br /><br />Try it out!",
			"gecontainer", "Google Earth", "On the right is Google Earth. Locate your image in Google Earth and drag the pins to match the pins on your image.", 
			"sceneSettingsButton;sceneSettingsDropdown", "Google Earth Settings", "Here you can reset your pin set, toggle seeing buildings, and adjust your altitude in Google Earth.", 
			"hitTestHelperBox", "Pin Helper", "As you drag a Google Earth point, this shows our best guess of whether that point hits the ground or a building.", 
			"none", "That's it!", "Press the 'X' in the corner of this box and start aligning!"
		];
}

BuildTut.prototype.startBuildTut = function() { 
	window.scroll(0, 0); // scroll to the top

	this.currentEle = this.tutorial[0].split(';');
	this.goToStep(0);

	$('#tut_textContainer').toggle();
	$('#tut_overlay').toggle();

	$('body').addClass('tut_bodyMod');
}

BuildTut.prototype.endBuildTut = function() {
	$('body').removeClass('tut_bodyMod');

	this.highlightCurrentSet(false);

	$('#tut_textContainer').toggle();
	$('#tut_overlay').toggle();
	$('#gecontainer').css({ 'visibility' : 'visible' })
}

BuildTut.prototype.goToStep = function( stepNum ) {
	// display content
	if ( this.tutorial[stepNum*3+1] != "none" ) $('#tut_textContent').html( '<span style="color:#777777">' + this.tutorial[stepNum*3+1] + '</span><br />' + this.tutorial[stepNum*3+2] );
	else $('#tut_textContent').html( this.tutorial[stepNum*3+2] );

	this.highlightCurrentSet(false);
	
	this.currentStep = stepNum;
	this.currentEle = this.tutorial[stepNum*3].split(';');

	// if the current element isnt the earth container, just hide it to avoid z-index issues
	if ( this.currentEle.indexOf( 'gecontainer' ) != -1 ) $('#gecontainer').css({ 'visibility' : 'visible' })
	else $('#gecontainer').css({ 'visibility' : 'hidden' })

	this.highlightCurrentSet(true);
	this.drawArrows();
	this.drawNumNav();
}
BuildTut.prototype.nextStep = function() { this.goToStep( this.currentStep+1 ); }
BuildTut.prototype.prevStep = function() { this.goToStep( this.currentStep-1 ); }

/* Helper Functions */

// highlights the current set of elements
// (brings to front, gives outline/shadow)
BuildTut.prototype.highlightCurrentSet = function( highlight ) {
	if ( this.currentEle[0] != "none" ) {
		for ( var i = 0; i < this.currentEle.length; i++ ) {
			var className = 'tut_eleMod'

			if ( highlight ) $('#'+this.currentEle[i]).addClass(className);
			else $('#'+this.currentEle[i]).removeClass(className);
		}
	}
}

// draws the arrows to navigate by one step forward or back
BuildTut.prototype.drawArrows = function() {
	if ( this.currentStep == 0 ) $('#tut_leftArrow').hide(0);
	else $('#tut_leftArrow').show(0);
	
	if ( this.currentStep + 1 == this.tutorial.length / 3 ) $('#tut_rightArrow').hide(0);
	else $('#tut_rightArrow').show(0);
}

// draws and adds click listeners to the number bar
// at the bottom of the tutorial
BuildTut.prototype.drawNumNav = function() {
	var numNavHtml = "";
	for ( var i = 0; i < this.tutorial.length / 3; i++ ) {
		numNavHtml += "<span id='" + i + "' class='";

		if ( i == this.currentStep ) numNavHtml += "tut_curNum";
		else numNavHtml += "tut_numLink";

		numNavHtml += "'>" + (i+1) + "</span>";
	}

	// this is terrible practice, and I apologize in advance
	$('#tut_numNav').html(numNavHtml);
	$('.tut_numLink').off('click').click({obj: this}, function(event) {
		event.data.obj.goToStep(parseInt(this.id));
	});
}
